import React from 'react';
import { SafeAreaView, FlatList } from 'react-native';
import Card from './Card'

const data: Array<Record<'title', string>> = [
  { title: '词典记忆' },
  { title: '常用句式' },
  { title: '阅读提升' },
  { title: '听力练习' },
  { title: '口语练习' },
  { title: '写作练习' },
  { title: '错题本' },
]

export default function LearningScreen(): React.ReactElement {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <FlatList
        data={data}
        renderItem={({ item, index }) => <Card index={index} title={item.title} />}
        keyExtractor={item => item.title}
        style={{
          display: 'flex',
          flex: 1,
        }}
        numColumns={2}
        columnWrapperStyle={{
          marginVertical: 20,
          paddingHorizontal: 20,
          justifyContent: 'space-between',
        }}
      />
    </SafeAreaView>
  );
}